<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 6.2.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/32x32-paimeng.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/16x16-paimeng.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha256-xejo6yLi6vGtAjcMIsY8BHdKsLg7QynVlFMzdQgUuy8=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/themes/blue/pace-theme-minimal.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js" integrity="sha256-gqd7YTjg/BtfqWSwsJOvndl0Bxc8gFImLEkXQT8+qj0=" crossorigin="anonymous"></script>

<script class="next-config" data-name="main" type="application/json">{"hostname":"xuande-hk.gitee.io","root":"/","images":"/images","scheme":"Pisces","darkmode":false,"version":"8.12.3","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":false,"style":null},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":true,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"shrinkIn"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>

    <meta name="description" content="Hexo + Gitee静态博客美化">
<meta property="og:type" content="article">
<meta property="og:title" content="Hexo博客next主题美化">
<meta property="og:url" content="https://xuande-hk.gitee.io/posts/2.html">
<meta property="og:site_name" content="玄德の博客">
<meta property="og:description" content="Hexo + Gitee静态博客美化">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://xuande-1309318075.cos.ap-beijing.myqcloud.com/my-blog-image/hexo-2.jpg">
<meta property="article:published_time" content="2022-08-31T00:00:00.000Z">
<meta property="article:modified_time" content="2023-03-22T06:32:51.369Z">
<meta property="article:author" content="玄德">
<meta property="article:tag" content="Hexo">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://xuande-1309318075.cos.ap-beijing.myqcloud.com/my-blog-image/hexo-2.jpg">


<link rel="canonical" href="https://xuande-hk.gitee.io/posts/2.html">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://xuande-hk.gitee.io/posts/2.html","path":"/posts/2.html","title":"Hexo博客next主题美化"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>Hexo博客next主题美化 | 玄德の博客</title>
  





  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">

  <!-- 看板娘 -->
  
      <script async src="/live2d/autoload.js"></script>
      <!-- <script async src="https://fastly.jsdelivr.net/gh/xuande-hk/live2d-widget/autoload.js"></script> -->
  
  
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">玄德の博客</p>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">不说话 装高手</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BB%E9%A2%98%E6%B3%A8%E5%85%A5"><span class="nav-number">2.</span> <span class="nav-text">主题注入</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%BC%A0%E6%A0%87%E6%A0%B7%E5%BC%8F"><span class="nav-number">2.1.</span> <span class="nav-text">鼠标样式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87"><span class="nav-number">2.2.</span> <span class="nav-text">背景图片</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%E6%A0%B7%E5%BC%8F"><span class="nav-number">2.3.</span> <span class="nav-text">自定义回到顶部样式</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BD%91%E7%AB%99%E5%9B%BE%E6%A0%87"><span class="nav-number">3.</span> <span class="nav-text">自定义网站图标</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AE%BE%E7%BD%AE%E4%BE%A7%E8%BE%B9%E6%A0%8F"><span class="nav-number">4.</span> <span class="nav-text">设置侧边栏</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BC%80%E5%90%AF%E8%BF%94%E5%9B%9E%E9%A1%B6%E9%83%A8%E5%8A%9F%E8%83%BD"><span class="nav-number">5.</span> <span class="nav-text">开启返回顶部功能</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BE%A7%E8%BE%B9%E6%A0%8F%E5%A4%B4%E5%83%8F%E8%AE%BE%E7%BD%AE"><span class="nav-number">6.</span> <span class="nav-text">侧边栏头像设置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%8A%A8%E7%89%B9%E6%95%88"><span class="nav-number">7.</span> <span class="nav-text">鼠标移动特效</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E7%89%B9%E6%95%88"><span class="nav-number">8.</span> <span class="nav-text">鼠标点击特效</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BE%A7%E6%A0%8F%E6%97%B6%E9%97%B4"><span class="nav-number">9.</span> <span class="nav-text">自定义侧栏时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#live2d%E9%AB%98%E7%BA%A7%E7%9C%8B%E6%9D%BF%E5%A8%98"><span class="nav-number">10.</span> <span class="nav-text">live2d高级看板娘</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AE%80%E5%8D%95Demo"><span class="nav-number">10.1.</span> <span class="nav-text">简单Demo</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9C%8B%E6%9D%BF%E5%A8%98"><span class="nav-number">10.2.</span> <span class="nav-text">自定义看板娘</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A1%A5%E5%85%85"><span class="nav-number">10.3.</span> <span class="nav-text">补充</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%BD%AE%E6%92%AD%E5%9B%BE%E8%AE%BE%E7%BD%AE"><span class="nav-number">11.</span> <span class="nav-text">轮播图设置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E6%AD%A5%EF%BC%9A%E6%B7%BB%E5%8A%A0%E9%85%8D%E7%BD%AE"><span class="nav-number">11.1.</span> <span class="nav-text">第一步：添加配置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E6%AD%A5%EF%BC%9A%E6%B7%BB%E5%8A%A0%E6%96%87%E4%BB%B6"><span class="nav-number">11.2.</span> <span class="nav-text">第二步：添加文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AC%AC%E4%B8%89%E6%AD%A5%EF%BC%9A%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E4%B8%AD%E9%85%8D%E7%BD%AE%E5%9B%BE%E7%89%87%E5%8F%8A%E9%93%BE%E6%8E%A5"><span class="nav-number">11.3.</span> <span class="nav-text">第三步：配置文件中配置图片及链接</span></a></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="玄德"
      src="/images/avatar.png">
  <p class="site-author-name" itemprop="name">玄德</p>
  <div class="site-description" itemprop="description">像珍惜礼物一样，珍惜今天。</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">5</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
        <span class="site-state-item-count">2</span>
        <span class="site-state-item-name">分类</span>
      </div>
      <div class="site-state-item site-state-tags">
        <span class="site-state-item-count">4</span>
        <span class="site-state-item-name">标签</span>
      </div>
  </nav>
</div>
  <div class="links-of-author site-overview-item animated">
      <span class="links-of-author-item">
        <a href="https://github.com/yourname" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:yourname@gmail.com" title="E-Mail → mailto:yourname@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://space.bilibili.com/286727058" title="bilibili → https:&#x2F;&#x2F;space.bilibili.com&#x2F;286727058" rel="noopener" target="_blank"><i class="custom bilibili fa-fw"></i>bilibili</a>
      </span>
  </div>


  <div class="links-of-blogroll site-overview-item animated">
    <div class="links-of-blogroll-title"><i class="fa fa-globe fa-fw"></i>
      友情链接
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="https://fanyi.baidu.com/?aldtype=16047#it/zh/onmobile" title="https:&#x2F;&#x2F;fanyi.baidu.com&#x2F;?aldtype&#x3D;16047#it&#x2F;zh&#x2F;onmobile" rel="noopener" target="_blank">百度翻译</a>
        </li>
    </ul>
  </div>

        </div>
      </div>

      <!-- 自定义配置文件 -->
      <!-- 近期文章板块 -->
      
        <div class="links-of-blogroll motion-element links-of-blogroll-block">
          <div class="links-of-blogroll-title">
            <!-- modify icon to fire by szw -->
            <i class="fa fa-history fa-" aria-hidden="true"></i>
            近期文章
          </div>
          <ul class="links-of-blogroll-list">
            
            
            <li>
              <a href="/" title="" target="_blank"></a>
            </li>
            
            <li>
              <a href="/" title="" target="_blank"></a>
            </li>
            
            <li>
              <a href="/" title="" target="_blank"></a>
            </li>
            
            <li>
              <a href="/" title="" target="_blank"></a>
            </li>
            
            <li>
              <a href="/" title="" target="_blank"></a>
            </li>
            
          </ul>
        </div>
      

      <!-- canvas粒子时钟 -->
        
        <!-- canvas粒子时钟 https://www.cnblogs.com/xiaohuochai/p/6368039.html
  https://www.html5tricks.com/html5-canvas-dance-time.html
 -->
<div id="">
  <canvas id="canvas" style="width:60%;">
</div>
<script async>
(function(){
  var WINDOW_WIDTH = 820;
  		var WINDOW_HEIGHT = 250;
  		var RADIUS = 7; //球半径
  		var NUMBER_GAP = 10; //数字之间的间隙
  		var u=0.65; //碰撞能量损耗系数
  		var context; //Canvas绘制上下文
  		var balls = []; //存储彩色的小球
  		const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]; //彩色小球的颜色
  		var currentNums = []; //屏幕显示的8个字符
  		var digit =
                  [
                      [
                          [0,0,1,1,1,0,0],
                          [0,1,1,0,1,1,0],
                          [1,1,0,0,0,1,1],
                          [1,1,0,0,0,1,1],
                          [1,1,0,0,0,1,1],
                          [1,1,0,0,0,1,1],
                          [1,1,0,0,0,1,1],
                          [1,1,0,0,0,1,1],
                          [0,1,1,0,1,1,0],
                          [0,0,1,1,1,0,0]
                      ],//0
                      [
                          [0,0,0,1,1,0,0],
                          [0,1,1,1,1,0,0],
                          [0,0,0,1,1,0,0],
                          [0,0,0,1,1,0,0],
                          [0,0,0,1,1,0,0],
                          [0,0,0,1,1,0,0],
                          [0,0,0,1,1,0,0],
                          [0,0,0,1,1,0,0],
                          [0,0,0,1,1,0,0],
                          [1,1,1,1,1,1,1]
                      ],//1
                      [
                          [0,1,1,1,1,1,0],
                          [1,1,0,0,0,1,1],
                          [0,0,0,0,0,1,1],
                          [0,0,0,0,1,1,0],
                          [0,0,0,1,1,0,0],
                          [0,0,1,1,0,0,0],
                          [0,1,1,0,0,0,0],
                          [1,1,0,0,0,0,0],
                          [1,1,0,0,0,1,1],
                          [1,1,1,1,1,1,1]
                      ],//2
                      [
                          [1,1,1,1,1,1,1],
                          [0,0,0,0,0,1,1],
                          [0,0,0,0,1,1,0],
                          [0,0,0,1,1,0,0],
                          [0,0,1,1,1,0,0],
                          [0,0,0,0,1,1,0],
                          [0,0,0,0,0,1,1],
                          [0,0,0,0,0,1,1],
                          [1,1,0,0,0,1,1],
                          [0,1,1,1,1,1,0]
                      ],//3
                      [
                          [0,0,0,0,1,1,0],
                          [0,0,0,1,1,1,0],
                          [0,0,1,1,1,1,0],
                          [0,1,1,0,1,1,0],
                          [1,1,0,0,1,1,0],
                          [1,1,1,1,1,1,1],
                          [0,0,0,0,1,1,0],
                          [0,0,0,0,1,1,0],
                          [0,0,0,0,1,1,0],
                          [0,0,0,1,1,1,1]
                      ],//4
                      [
                          [1,1,1,1,1,1,1],
                          [1,1,0,0,0,0,0],
                          [1,1,0,0,0,0,0],
                          [1,1,1,1,1,1,0],
                          [0,0,0,0,0,1,1],
                          [0,0,0,0,0,1,1],
                          [0,0,0,0,0,1,1],
                          [0,0,0,0,0,1,1],
                          [1,1,0,0,0,1,1],
                          [0,1,1,1,1,1,0]
                      ],//5
                      [
                          [0,0,0,0,1,1,0],
                          [0,0,1,1,0,0,0],
                          [0,1,1,0,0,0,0],
                          [1,1,0,0,0,0,0],
                          [1,1,0,1,1,1,0],
                          [1,1,0,0,0,1,1],
                          [1,1,0,0,0,1,1],
                          [1,1,0,0,0,1,1],
                          [1,1,0,0,0,1,1],
                          [0,1,1,1,1,1,0]
                      ],//6
                      [
                          [1,1,1,1,1,1,1],
                          [1,1,0,0,0,1,1],
                          [0,0,0,0,1,1,0],
                          [0,0,0,0,1,1,0],
                          [0,0,0,1,1,0,0],
                          [0,0,0,1,1,0,0],
                          [0,0,1,1,0,0,0],
                          [0,0,1,1,0,0,0],
                          [0,0,1,1,0,0,0],
                          [0,0,1,1,0,0,0]
                      ],//7
                      [
                          [0,1,1,1,1,1,0],
                          [1,1,0,0,0,1,1],
                          [1,1,0,0,0,1,1],
                          [1,1,0,0,0,1,1],
                          [0,1,1,1,1,1,0],
                          [1,1,0,0,0,1,1],
                          [1,1,0,0,0,1,1],
                          [1,1,0,0,0,1,1],
                          [1,1,0,0,0,1,1],
                          [0,1,1,1,1,1,0]
                      ],//8
                      [
                          [0,1,1,1,1,1,0],
                          [1,1,0,0,0,1,1],
                          [1,1,0,0,0,1,1],
                          [1,1,0,0,0,1,1],
                          [0,1,1,1,0,1,1],
                          [0,0,0,0,0,1,1],
                          [0,0,0,0,0,1,1],
                          [0,0,0,0,1,1,0],
                          [0,0,0,1,1,0,0],
                          [0,1,1,0,0,0,0]
                      ],//9
                      [
                          [0,0,0,0],
                          [0,0,0,0],
                          [0,1,1,0],
                          [0,1,1,0],
                          [0,0,0,0],
                          [0,0,0,0],
                          [0,1,1,0],
                          [0,1,1,0],
                          [0,0,0,0],
                          [0,0,0,0]
                      ]//:
                  ];

  		function drawDatetime(cxt){
  			var nums = [];

  			context.fillStyle="#005eac"
  			var date = new Date();
  			var offsetX = 70, offsetY = 30;
  			var hours = date.getHours();
  			var num1 = Math.floor(hours/10);
  			var num2 = hours%10;
  			nums.push({num: num1});
  			nums.push({num: num2});
  			nums.push({num: 10}); //冒号
  			var minutes = date.getMinutes();
  			var num1 = Math.floor(minutes/10);
  			var num2 = minutes%10;
  			nums.push({num: num1});
  			nums.push({num: num2});
  			nums.push({num: 10}); //冒号
  			var seconds = date.getSeconds();
  			var num1 = Math.floor(seconds/10);
  			var num2 = seconds%10;
  			nums.push({num: num1});
  			nums.push({num: num2});

  			for(var x = 0;x<nums.length;x++){
  				nums[x].offsetX = offsetX;
  				offsetX = drawSingleNumber(offsetX,offsetY, nums[x].num,cxt);
  				//两个数字连一块，应该间隔一些距离
  				if(x<nums.length-1){
  					if((nums[x].num!=10) &&(nums[x+1].num!=10)){
  						offsetX+=NUMBER_GAP;
  					}
  				}
  			}

  			//说明这是初始化
  			if(currentNums.length ==0){
  				currentNums = nums;
  			}else{
  				//进行比较
  				for(var index = 0;index<currentNums.length;index++){
  					if(currentNums[index].num!=nums[index].num){
  						//不一样时，添加彩色小球
  						addBalls(nums[index]);
  						currentNums[index].num=nums[index].num;
  					}
  				}
  			}
  			renderBalls(cxt);
  			updateBalls();

  			return date;
  		}

  		function addBalls (item) {
  			var num = item.num;
  			var numMatrix = digit[num];
  			for(var y = 0;y<numMatrix.length;y++){
  				for(var x = 0;x<numMatrix[y].length;x++){
  					if(numMatrix[y][x]==1){
  						var ball={
  							offsetX:item.offsetX+RADIUS+RADIUS*2*x,
  							offsetY:30+RADIUS+RADIUS*2*y,
  							color:colors[Math.floor(Math.random()*colors.length)],
  							g:1.5+Math.random(),
  							vx:Math.pow(-1, Math.ceil(Math.random()*10))*4+Math.random(),
  							vy:-5
  						}
  						balls.push(ball);
  					}
  				}
  			}
  		}

  		function renderBalls(cxt){
  			for(var index = 0;index<balls.length;index++){
  				cxt.beginPath();
  				cxt.fillStyle=balls[index].color;
  				cxt.arc(balls[index].offsetX, balls[index].offsetY, RADIUS, 0, 2*Math.PI);
  				cxt.fill();
  			}
  		}

  		function updateBalls () {
  			var i =0;
  			for(var index = 0;index<balls.length;index++){
  				var ball = balls[index];
  				ball.offsetX += ball.vx;
  				ball.offsetY += ball.vy;
  				ball.vy+=ball.g;
  				if(ball.offsetY > (WINDOW_HEIGHT-RADIUS)){
  					ball.offsetY= WINDOW_HEIGHT-RADIUS;
  					ball.vy=-ball.vy*u;
  				}
  				if(ball.offsetX>RADIUS&&ball.offsetX<(WINDOW_WIDTH-RADIUS)){

  					balls[i]=balls[index];
  					i++;
  				}
  			}
  			//去除出边界的球
  			for(;i<balls.length;i++){
  				balls.pop();
  			}
  		}
  		function drawSingleNumber(offsetX, offsetY, num, cxt){
  			var numMatrix = digit[num];
  			for(var y = 0;y<numMatrix.length;y++){
  				for(var x = 0;x<numMatrix[y].length;x++){
  					if(numMatrix[y][x]==1){
  						cxt.beginPath();
  						cxt.arc(offsetX+RADIUS+RADIUS*2*x,offsetY+RADIUS+RADIUS*2*y,RADIUS,0,2*Math.PI);
  						cxt.fill();
  					}
  				}
  			}
  			cxt.beginPath();
  			offsetX += numMatrix[0].length*RADIUS*2;
  			return offsetX;
  		}

  		var canvas = document.getElementById("canvas");
  		canvas.width=WINDOW_WIDTH;
  		canvas.height=WINDOW_HEIGHT;
  		context = canvas.getContext("2d");

  		//记录当前绘制的时刻
  		var currentDate = new Date();

  		setInterval(function(){
  			//清空整个Canvas，重新绘制内容
  			context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  			drawDatetime(context);
  		}, 50)
})();
</script>

      

      <!-- 网站运行时间 -->
           
        <div id="days"></div>

<script async language="javascript">

  function show_date_time(){
      window.setTimeout("show_date_time()", 1000);
  //    BirthDay=new Date("25/07/2022 12:00:00");
      BirthDay=new Date("07/25/2022 12:00:00");
      today=new Date();
      timeold=(today.getTime()-BirthDay.getTime());
      sectimeold=timeold/1000
      secondsold=Math.floor(sectimeold);
      msPerDay=24*60*60*1000
      e_daysold=timeold/msPerDay
      daysold=Math.floor(e_daysold);
      e_hrsold=(e_daysold-daysold)*24;
      hrsold=setzero(Math.floor(e_hrsold));
      e_minsold=(e_hrsold-hrsold)*60;
      minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
      seconds=setzero(Math.floor((e_minsold-minsold)*60));
      document.getElementById('days').innerHTML="已运行"+daysold+"天"+hrsold+"时"+minsold+"分"+seconds+"秒";
  }

  function setzero(i){
      if (i<10)
      {i="0" + i};
      return i;
  }

  show_date_time();

</script>

      

    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

  <a href="https://github.com/XuanDe-HK" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://xuande-hk.gitee.io/posts/2.html">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.png">
      <meta itemprop="name" content="玄德">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="玄德の博客">
      <meta itemprop="description" content="像珍惜礼物一样，珍惜今天。">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="Hexo博客next主题美化 | 玄德の博客">
      <meta itemprop="description" content="Hexo + Gitee静态博客美化">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Hexo博客next主题美化
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2022-08-31 08:00:00" itemprop="dateCreated datePublished" datetime="2022-08-31T08:00:00+08:00">2022-08-31</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2023-03-22 14:32:51" itemprop="dateModified" datetime="2023-03-22T14:32:51+08:00">2023-03-22</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%8D%9A%E5%AE%A2/" itemprop="url" rel="index"><span itemprop="name">博客</span></a>
        </span>
    </span>

  
    <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv">
      <span class="post-meta-item-icon">
        <i class="far fa-eye"></i>
      </span>
      <span class="post-meta-item-text">阅读次数：</span>
      <span id="busuanzi_value_page_pv"></span>
    </span>
</div>

            <div class="post-description">Hexo + Gitee静态博客美化</div>
        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      <div class="post-gallery" itemscope itemtype="http://schema.org/ImageGallery">
    
    <div class="post-gallery-image">
      <img src="https://xuande-1309318075.cos.ap-beijing.myqcloud.com/my-blog-image/hexo-2.jpg" itemprop="contentUrl">
    </div>
    </div>
        <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p><strong style="color:red">图库失效，请访问以下链接阅读文章</strong></p>
<p>CSDN：<a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_60700961/article/details/126616161">https://blog.csdn.net/qq_60700961/article/details/126616161</a></p>
<p>博客园：<a target="_blank" rel="noopener" href="https://www.cnblogs.com/xuande/p/16641618.html">https://www.cnblogs.com/xuande/p/16641618.html</a></p>
<p><strong>需要在Hexo下配置next主题</strong></p>
<p><strong>Hexo配置next主题教程：</strong><a href="https://xuande-hk.gitee.io/posts/1.html" target="_blank">点我跳转</a></p>
<p><strong>更改配置以后使用素质三连：<code>hexo clean &amp;&amp; hexo g &amp;&amp; hexo s</code>即可本地看到效果。</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo clean &amp;&amp; hexo g &amp;&amp; hexo s</span><br></pre></td></tr></table></figure>

<p><strong>注：部分参考自互联网，感谢各位大佬的教程</strong></p>
<h2 id="主题注入"><a href="#主题注入" class="headerlink" title="主题注入"></a>主题注入</h2><p>在<code>myblog/themes/next/_config.yml</code>里面找到<code>custom_file_path</code></p>
<p>把前面的注释去掉，开启主题注入功能</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">custom_file_path:</span><br><span class="line">  style: source/_data/styles.styl</span><br></pre></td></tr></table></figure>

<p>找到<code>myblog\blog\source\_data\styles.styl</code>如果没有就创建一个</p>
<p><strong>资源文件文件在<code>myblog\blog\themes\xuande\source\images</code>目录下配置</strong></p>
<h3 id="鼠标样式"><a href="#鼠标样式" class="headerlink" title="鼠标样式"></a>鼠标样式</h3><p>注意开启主题注入功能</p>
<p>在<code>myblog\blog\source\_data\styles.styl</code>里面添加如下代码即可</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">/*鼠标样式*/</span><br><span class="line">* &#123;</span><br><span class="line">  cursor: url(/images/Arrow.cur),auto;</span><br><span class="line">&#125;</span><br><span class="line">:active &#123;</span><br><span class="line">  // cursor: url(/images/Hand.cur),auto</span><br><span class="line">&#125;</span><br><span class="line">:link &#123;</span><br><span class="line">  cursor: url(/images/Hand.cur),auto</span><br><span class="line">&#125;</span><br><span class="line">// 鼠标样式补充</span><br><span class="line">a, span.exturl &#123;</span><br><span class="line">	cursor: url(/images/Hand.cur),auto</span><br><span class="line">&#125;</span><br><span class="line">.posts-expand .post-meta time &#123;</span><br><span class="line">	cursor: url(/images/Hand.cur),auto</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>这里的url路径就是<code>myblog\blog\themes\xuande\source\images\Arrow.cur</code>，下面同理</p>
<h3 id="背景图片"><a href="#背景图片" class="headerlink" title="背景图片"></a>背景图片</h3><p>注意开启主题注入功能</p>
<p>在<code>myblog\blog\source\_data\styles.styl</code>里面添加如下代码即可</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">// 添加背景图片</span><br><span class="line">body &#123;</span><br><span class="line">      background: url(/images/background.png);//自己喜欢的图片地址</span><br><span class="line">      background-size: cover;</span><br><span class="line">      background-repeat: no-repeat;</span><br><span class="line">      background-attachment: fixed;</span><br><span class="line">      background-position: 50% 50%;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="自定义回到顶部样式"><a href="#自定义回到顶部样式" class="headerlink" title="自定义回到顶部样式"></a>自定义回到顶部样式</h3><p>注意开启主题注入功能</p>
<p>在<code>myblog\blog\source\_data\styles.styl</code>里面添加如下代码即可</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">//自定义回到顶部样式</span><br><span class="line">.back-to-top &#123;</span><br><span class="line">  //right: 60px;</span><br><span class="line">  width: 70px;  //图片素材宽度</span><br><span class="line">  height: 900px;  //图片素材高度</span><br><span class="line">  top: -900px;</span><br><span class="line">  bottom: unset;</span><br><span class="line">  transition: all .5s ease-in-out;</span><br><span class="line">  background: url(&quot;/images/scroll.png&quot;);</span><br><span class="line">  //隐藏箭头图标</span><br><span class="line">  &gt; i &#123;</span><br><span class="line">    display: none;</span><br><span class="line">  &#125;</span><br><span class="line">  &amp;.back-to-top-on &#123;</span><br><span class="line">    bottom: unset;</span><br><span class="line">    top: 100vh &lt; (900px + 200px) ? calc( 100vh - 900px - 200px ) : 0px;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="自定义网站图标"><a href="#自定义网站图标" class="headerlink" title="自定义网站图标"></a>自定义网站图标</h2><p>在<code>myblog/themes/next/_config.yml</code>里面找到<code>favicon</code>，在这里就可以配置图标的路径，一般情况下只需要设置small和medium两个就可以</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">favicon:</span><br><span class="line">  small: /images/16x16-paimeng.png</span><br><span class="line">  medium: /images/32x32-paimeng.png</span><br><span class="line">  apple_touch_icon: /images/apple-touch-icon-next.png</span><br><span class="line">  safari_pinned_tab: /images/logo.svg</span><br></pre></td></tr></table></figure>

<p>png文件在<code>myblog\blog\themes\xuande\source\images</code>目录下配置即可</p>
<p><strong>效果：</strong><img src="https://img-blog.csdnimg.cn/8946c3634fe14d93a521173d2241ded4.png#pic_center"></p>
<h2 id="设置侧边栏"><a href="#设置侧边栏" class="headerlink" title="设置侧边栏"></a>设置侧边栏</h2><p>在<code>myblog/themes/next/_config.yml</code>里面找到<code>sidebar</code></p>
<p>修改为如下配置：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">sidebar:</span><br><span class="line">  # Sidebar Position.</span><br><span class="line">  position: left</span><br><span class="line">  #position: right</span><br><span class="line"></span><br><span class="line">  # Manual define the sidebar width. If commented, will be default for:</span><br><span class="line">  # Muse | Mist: 320</span><br><span class="line">  # Pisces | Gemini: 240</span><br><span class="line">  #width: 300</span><br><span class="line"></span><br><span class="line">  # Sidebar Display (only for Muse | Mist), available values:</span><br><span class="line">  #  - post    expand on posts automatically. Default.</span><br><span class="line">  #  - always  expand for all pages automatically.</span><br><span class="line">  #  - hide    expand only when click on the sidebar toggle icon.</span><br><span class="line">  #  - remove  totally remove sidebar including sidebar toggle.</span><br><span class="line">  display: post</span><br><span class="line"></span><br><span class="line">  # Sidebar padding in pixels.</span><br><span class="line">  padding: 18</span><br><span class="line">  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).</span><br><span class="line">  offset: 12</span><br></pre></td></tr></table></figure>



<h2 id="开启返回顶部功能"><a href="#开启返回顶部功能" class="headerlink" title="开启返回顶部功能"></a>开启返回顶部功能</h2><p>在<code>myblog/themes/next/_config.yml</code>里面找到<code>back2top</code></p>
<p>修改为如下配置：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">back2top:</span><br><span class="line">  enable: true</span><br><span class="line">  # Back to top in sidebar.</span><br><span class="line">  sidebar: false</span><br><span class="line">  # Scroll percent label in b2t button.</span><br><span class="line">  scrollpercent: false</span><br></pre></td></tr></table></figure>



<h2 id="侧边栏头像设置"><a href="#侧边栏头像设置" class="headerlink" title="侧边栏头像设置"></a>侧边栏头像设置</h2><p>在<code>myblog/themes/next/_config.yml</code>里面找到<code>avatr</code></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"># 侧栏头像</span><br><span class="line"># Sidebar Avatar</span><br><span class="line">avatar:</span><br><span class="line">  url: /images/avatar.png</span><br><span class="line">  rounded: true</span><br><span class="line">  rotated: true</span><br><span class="line"></span><br><span class="line">site_state: true</span><br></pre></td></tr></table></figure>

<p>图片在<code>myblog\blog\themes\xuande\source\images</code>目录下配置即可</p>
<h2 id="鼠标移动特效"><a href="#鼠标移动特效" class="headerlink" title="鼠标移动特效"></a>鼠标移动特效</h2><p>在<code>myblog\themes\next\source\js\</code>中新建<code>fairyDustCursor.js</code>文件，并添加以下代码</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br></pre></td><td class="code"><pre><span class="line">(function fairyDustCursor() &#123;</span><br><span class="line">  </span><br><span class="line">  var possibleColors = [&quot;#D61C59&quot;, &quot;#E7D84B&quot;, &quot;#1B8798&quot;]</span><br><span class="line">  var width = window.innerWidth;</span><br><span class="line">  var height = window.innerHeight;</span><br><span class="line">  var cursor = &#123;x: width/2, y: width/2&#125;;</span><br><span class="line">  var particles = [];</span><br><span class="line">  </span><br><span class="line">  function init() &#123;</span><br><span class="line">    bindEvents();</span><br><span class="line">    loop();</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  // Bind events that are needed</span><br><span class="line">  function bindEvents() &#123;</span><br><span class="line">    document.addEventListener(&#x27;mousemove&#x27;, onMouseMove);</span><br><span class="line">    document.addEventListener(&#x27;touchmove&#x27;, onTouchMove);</span><br><span class="line">    document.addEventListener(&#x27;touchstart&#x27;, onTouchMove);</span><br><span class="line">    </span><br><span class="line">    window.addEventListener(&#x27;resize&#x27;, onWindowResize);</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  function onWindowResize(e) &#123;</span><br><span class="line">    width = window.innerWidth;</span><br><span class="line">    height = window.innerHeight;</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  function onTouchMove(e) &#123;</span><br><span class="line">    if( e.touches.length &gt; 0 ) &#123;</span><br><span class="line">      for( var i = 0; i &lt; e.touches.length; i++ ) &#123;</span><br><span class="line">        addParticle( e.touches[i].clientX, e.touches[i].clientY, possibleColors[Math.floor(Math.random()*possibleColors.length)]);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  function onMouseMove(e) &#123;    </span><br><span class="line">    cursor.x = e.clientX;</span><br><span class="line">    cursor.y = e.clientY;</span><br><span class="line">    </span><br><span class="line">    addParticle( cursor.x, cursor.y, possibleColors[Math.floor(Math.random()*possibleColors.length)]);</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  function addParticle(x, y, color) &#123;</span><br><span class="line">    var particle = new Particle();</span><br><span class="line">    particle.init(x, y, color);</span><br><span class="line">    particles.push(particle);</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  function updateParticles() &#123;</span><br><span class="line">    </span><br><span class="line">    for( var i = 0; i &lt; particles.length; i++ ) &#123;</span><br><span class="line">      particles[i].update();</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    for( var i = particles.length -1; i &gt;= 0; i-- ) &#123;</span><br><span class="line">      if( particles[i].lifeSpan &lt; 0 ) &#123;</span><br><span class="line">        particles[i].die();</span><br><span class="line">        particles.splice(i, 1);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  function loop() &#123;</span><br><span class="line">    requestAnimationFrame(loop);</span><br><span class="line">    updateParticles();</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  function Particle() &#123;</span><br><span class="line"></span><br><span class="line">    this.character = &quot;*&quot;;</span><br><span class="line">    this.lifeSpan = 120; //ms</span><br><span class="line">    this.initialStyles =&#123;</span><br><span class="line">      &quot;position&quot;: &quot;fixed&quot;,</span><br><span class="line">      &quot;top&quot;: &quot;0&quot;, //必须加</span><br><span class="line">      &quot;display&quot;: &quot;block&quot;,</span><br><span class="line">      &quot;pointerEvents&quot;: &quot;none&quot;,</span><br><span class="line">      &quot;z-index&quot;: &quot;10000000&quot;,</span><br><span class="line">      &quot;fontSize&quot;: &quot;20px&quot;,</span><br><span class="line">      &quot;will-change&quot;: &quot;transform&quot;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    this.init = function(x, y, color) &#123;</span><br><span class="line"></span><br><span class="line">      this.velocity = &#123;</span><br><span class="line">        x:  (Math.random() &lt; 0.5 ? -1 : 1) * (Math.random() / 2),</span><br><span class="line">        y: 1</span><br><span class="line">      &#125;;</span><br><span class="line">      </span><br><span class="line">      this.position = &#123;x: x - 10, y: y - 20&#125;;</span><br><span class="line">      this.initialStyles.color = color;</span><br><span class="line">      console.log(color);</span><br><span class="line"></span><br><span class="line">      this.element = document.createElement(&#x27;span&#x27;);</span><br><span class="line">      this.element.innerHTML = this.character;</span><br><span class="line">      applyProperties(this.element, this.initialStyles);</span><br><span class="line">      this.update();</span><br><span class="line">      </span><br><span class="line">      document.body.appendChild(this.element);</span><br><span class="line">    &#125;;</span><br><span class="line">    </span><br><span class="line">    this.update = function() &#123;</span><br><span class="line">      this.position.x += this.velocity.x;</span><br><span class="line">      this.position.y += this.velocity.y;</span><br><span class="line">      this.lifeSpan--;</span><br><span class="line">      </span><br><span class="line">      this.element.style.transform = &quot;translate3d(&quot; + this.position.x + &quot;px,&quot; + this.position.y + &quot;px,0) scale(&quot; + (this.lifeSpan / 120) + &quot;)&quot;;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    this.die = function() &#123;</span><br><span class="line">      this.element.parentNode.removeChild(this.element);</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  function applyProperties( target, properties ) &#123;</span><br><span class="line">    for( var key in properties ) &#123;</span><br><span class="line">      target.style[ key ] = properties[ key ];</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  init();</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>

<p>然后在<code>myblog\themes\next\layout_layout.njk</code>文件里内部引用：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 樱花特效 --&gt;</span><br><span class="line">  &#123;% if theme.sakura.enable %&#125;</span><br><span class="line">      &lt;script async src=&quot;/js/src/fairyDustCursor.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">  &#123;% endif %&#125;</span><br></pre></td></tr></table></figure>

<p>最后打开<code>myblog/themes/next/_config.yml</code>在最下面添加如下代码</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"># 樱花飘落动特效</span><br><span class="line">sakura:</span><br><span class="line">  enable: true</span><br></pre></td></tr></table></figure>



<h2 id="鼠标点击特效"><a href="#鼠标点击特效" class="headerlink" title="鼠标点击特效"></a>鼠标点击特效</h2><p>首先在<code>themes\next\source\js\cursor\ </code>目录下创建love.min.js</p>
<p>在里面添加如下代码：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">!function(e,t,a)&#123;function n()&#123;c(&quot;.heart&#123;width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);&#125;.heart:after,.heart:before&#123;content: &#x27;&#x27;;width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;&#125;.heart:after&#123;top: -5px;&#125;.heart:before&#123;left: -5px;&#125;&quot;),o(),r()&#125;function r()&#123;for(var e=0;e&lt;d.length;e++)d[e].alpha&lt;=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText=&quot;left:&quot;+d[e].x+&quot;px;top:&quot;+d[e].y+&quot;px;opacity:&quot;+d[e].alpha+&quot;;transform:scale(&quot;+d[e].scale+&quot;,&quot;+d[e].scale+&quot;) rotate(45deg);background:&quot;+d[e].color+&quot;;z-index:99999&quot;);requestAnimationFrame(r)&#125;function o()&#123;var t=&quot;function&quot;==typeof e.onclick&amp;&amp;e.onclick;e.onclick=function(e)&#123;t&amp;&amp;t(),i(e)&#125;&#125;function i(e)&#123;var a=t.createElement(&quot;div&quot;);a.className=&quot;heart&quot;,d.push(&#123;el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()&#125;),t.body.appendChild(a)&#125;function c(e)&#123;var a=t.createElement(&quot;style&quot;);a.type=&quot;text/css&quot;;try&#123;a.appendChild(t.createTextNode(e))&#125;catch(t)&#123;a.styleSheet.cssText=e&#125;t.getElementsByTagName(&quot;head&quot;)[0].appendChild(a)&#125;function s()&#123;return&quot;rgb(&quot;+~~(255*Math.random())+&quot;,&quot;+~~(255*Math.random())+&quot;,&quot;+~~(255*Math.random())+&quot;)&quot;&#125;var d=[];e.requestAnimationFrame=function()&#123;return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e)&#123;setTimeout(e,1e3/60)&#125;&#125;(),n()&#125;(window,document);</span><br></pre></td></tr></table></figure>

<p>text.js浮出文字代码</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">var a_idx = 0;</span><br><span class="line">jQuery(document).ready(function($) &#123;</span><br><span class="line">  $(&quot;body&quot;).click(function(e) &#123;</span><br><span class="line">    var a = new Array(&quot;喜欢我&quot;, &quot;不喜欢我&quot;);</span><br><span class="line">    var $i = $(&quot;&lt;span/&gt;&quot;).text(a[a_idx]);</span><br><span class="line">    var x = e.pageX,</span><br><span class="line">    y = e.pageY;</span><br><span class="line">    $i.css(&#123;</span><br><span class="line">      &quot;z-index&quot;: 99999,</span><br><span class="line">      &quot;top&quot;: y - 28,</span><br><span class="line">      &quot;left&quot;: x - a[a_idx].length * 8,</span><br><span class="line">      &quot;position&quot;: &quot;absolute&quot;,</span><br><span class="line">      &quot;color&quot;: &quot;#ff7a45&quot;</span><br><span class="line">    &#125;);</span><br><span class="line">    $(&quot;body&quot;).append($i);</span><br><span class="line">    $i.animate(&#123;</span><br><span class="line">      &quot;top&quot;: y - 180,</span><br><span class="line">      &quot;opacity&quot;: 0</span><br><span class="line">    &#125;, 1500, function() &#123;</span><br><span class="line">      $i.remove();</span><br><span class="line">    &#125;);</span><br><span class="line">    a_idx = (a_idx + 1) % a.length;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>fireworks.js礼花特效代码</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br></pre></td><td class="code"><pre><span class="line">class Circle &#123;</span><br><span class="line">  constructor(&#123; origin, speed, color, angle, context &#125;) &#123;</span><br><span class="line">    this.origin = origin</span><br><span class="line">    this.position = &#123; ...this.origin &#125;</span><br><span class="line">    this.color = color</span><br><span class="line">    this.speed = speed</span><br><span class="line">    this.angle = angle</span><br><span class="line">    this.context = context</span><br><span class="line">    this.renderCount = 0</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  draw() &#123;</span><br><span class="line">    this.context.fillStyle = this.color</span><br><span class="line">    this.context.beginPath()</span><br><span class="line">    this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)</span><br><span class="line">    this.context.fill()</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  move() &#123;</span><br><span class="line">    this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x</span><br><span class="line">    this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)</span><br><span class="line">    this.renderCount++</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class Boom &#123;</span><br><span class="line">  constructor (&#123; origin, context, circleCount = 16, area &#125;) &#123;</span><br><span class="line">    this.origin = origin</span><br><span class="line">    this.context = context</span><br><span class="line">    this.circleCount = circleCount</span><br><span class="line">    this.area = area</span><br><span class="line">    this.stop = false</span><br><span class="line">    this.circles = []</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  randomArray(range) &#123;</span><br><span class="line">    const length = range.length</span><br><span class="line">    const randomIndex = Math.floor(length * Math.random())</span><br><span class="line">    return range[randomIndex]</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  randomColor() &#123;</span><br><span class="line">    const range = [&#x27;8&#x27;, &#x27;9&#x27;, &#x27;A&#x27;, &#x27;B&#x27;, &#x27;C&#x27;, &#x27;D&#x27;, &#x27;E&#x27;, &#x27;F&#x27;]</span><br><span class="line">    return &#x27;#&#x27; + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  randomRange(start, end) &#123;</span><br><span class="line">    return (end - start) * Math.random() + start</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  init() &#123;</span><br><span class="line">    for(let i = 0; i &lt; this.circleCount; i++) &#123;</span><br><span class="line">      const circle = new Circle(&#123;</span><br><span class="line">        context: this.context,</span><br><span class="line">        origin: this.origin,</span><br><span class="line">        color: this.randomColor(),</span><br><span class="line">        angle: this.randomRange(Math.PI - 1, Math.PI + 1),</span><br><span class="line">        speed: this.randomRange(1, 6)</span><br><span class="line">      &#125;)</span><br><span class="line">      this.circles.push(circle)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  move() &#123;</span><br><span class="line">    this.circles.forEach((circle, index) =&gt; &#123;</span><br><span class="line">      if (circle.position.x &gt; this.area.width || circle.position.y &gt; this.area.height) &#123;</span><br><span class="line">        return this.circles.splice(index, 1)</span><br><span class="line">      &#125;</span><br><span class="line">      circle.move()</span><br><span class="line">    &#125;)</span><br><span class="line">    if (this.circles.length == 0) &#123;</span><br><span class="line">      this.stop = true</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  draw() &#123;</span><br><span class="line">    this.circles.forEach(circle =&gt; circle.draw())</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class CursorSpecialEffects &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.computerCanvas = document.createElement(&#x27;canvas&#x27;)</span><br><span class="line">    this.renderCanvas = document.createElement(&#x27;canvas&#x27;)</span><br><span class="line"></span><br><span class="line">    this.computerContext = this.computerCanvas.getContext(&#x27;2d&#x27;)</span><br><span class="line">    this.renderContext = this.renderCanvas.getContext(&#x27;2d&#x27;)</span><br><span class="line"></span><br><span class="line">    this.globalWidth = window.innerWidth</span><br><span class="line">    this.globalHeight = window.innerHeight</span><br><span class="line"></span><br><span class="line">    this.booms = []</span><br><span class="line">    this.running = false</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  handleMouseDown(e) &#123;</span><br><span class="line">    const boom = new Boom(&#123;</span><br><span class="line">      origin: &#123; x: e.clientX, y: e.clientY &#125;,</span><br><span class="line">      context: this.computerContext,</span><br><span class="line">      area: &#123;</span><br><span class="line">        width: this.globalWidth,</span><br><span class="line">        height: this.globalHeight</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">    boom.init()</span><br><span class="line">    this.booms.push(boom)</span><br><span class="line">    this.running || this.run()</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  handlePageHide() &#123;</span><br><span class="line">    this.booms = []</span><br><span class="line">    this.running = false</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  init() &#123;</span><br><span class="line">    const style = this.renderCanvas.style</span><br><span class="line">    style.position = &#x27;fixed&#x27;</span><br><span class="line">    style.top = style.left = 0</span><br><span class="line">    style.zIndex = &#x27;999999999999999999999999999999999999999999&#x27;</span><br><span class="line">    style.pointerEvents = &#x27;none&#x27;</span><br><span class="line"></span><br><span class="line">    style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth</span><br><span class="line">    style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight</span><br><span class="line"></span><br><span class="line">    document.body.append(this.renderCanvas)</span><br><span class="line"></span><br><span class="line">    window.addEventListener(&#x27;mousedown&#x27;, this.handleMouseDown.bind(this))</span><br><span class="line">    window.addEventListener(&#x27;pagehide&#x27;, this.handlePageHide.bind(this))</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  run() &#123;</span><br><span class="line">    this.running = true</span><br><span class="line">    if (this.booms.length == 0) &#123;</span><br><span class="line">      return this.running = false</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    requestAnimationFrame(this.run.bind(this))</span><br><span class="line"></span><br><span class="line">    this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)</span><br><span class="line">    this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)</span><br><span class="line"></span><br><span class="line">    this.booms.forEach((boom, index) =&gt; &#123;</span><br><span class="line">      if (boom.stop) &#123;</span><br><span class="line">        return this.booms.splice(index, 1)</span><br><span class="line">      &#125;</span><br><span class="line">      boom.move()</span><br><span class="line">      boom.draw()</span><br><span class="line">    &#125;)</span><br><span class="line">    this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">const cursorSpecialEffects = new CursorSpecialEffects()</span><br><span class="line">cursorSpecialEffects.init()</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>然后我们在主题自定义布局文件<code>hexo/source/_data/body-end.swig</code>中，没有就创建一个，在里面添加以下代码：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;# 鼠标点击特效 #&#125;</span><br><span class="line">&#123;% if theme.cursor_effect == &quot;fireworks&quot; %&#125;</span><br><span class="line">  &lt;script async src=&quot;/js/cursor/fireworks.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&#123;% elseif theme.cursor_effect == &quot;explosion&quot; %&#125;</span><br><span class="line">  &lt;canvas class=&quot;fireworks&quot; style=&quot;position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;&quot; &gt;&lt;/canvas&gt;</span><br><span class="line">  &lt;script src=&quot;//cdn.bootcss.com/animejs/2.2.0/anime.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">  &lt;script async src=&quot;/js/cursor/explosion.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&#123;% elseif theme.cursor_effect == &quot;love&quot; %&#125;</span><br><span class="line">  &lt;script async src=&quot;/js/cursor/love.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&#123;% elseif theme.cursor_effect == &quot;text&quot; %&#125;</span><br><span class="line">  &lt;script async src=&quot;/js/cursor/text.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&#123;% endif %&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>在主题注入里取消 body-end.swig 的注释（主题注入教程在上面）</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">custom_file_path:</span><br><span class="line">bodyEnd: source/_data/body-end.swig</span><br></pre></td></tr></table></figure>

<p>最后打开<code>myblog/themes/next/_config.yml</code>在最下面添加如下代码</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"># 鼠标点击特效</span><br><span class="line"># mouse click effect: fireworks | explosion | love | text</span><br><span class="line">cursor_effect: love</span><br><span class="line"></span><br><span class="line"># 打字特效</span><br><span class="line"># typing effect</span><br><span class="line">typing_effect:</span><br><span class="line">  colorful: false  # 礼花特效</span><br><span class="line">  shake: false    # 震动特效</span><br></pre></td></tr></table></figure>



<h2 id="自定义侧栏时间"><a href="#自定义侧栏时间" class="headerlink" title="自定义侧栏时间"></a>自定义侧栏时间</h2><p><strong>效果如图：</strong><br><img src="https://img-blog.csdnimg.cn/d021d60c49ad43488dcce95c38018ced.png#pic_center" alt="image"></p>
<p>首先打开<code>myblog\blog\themes\xuande\layout\_macro\sidebar.njk</code></p>
<p>添加如下代码：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- canvas粒子时钟 --&gt;</span><br><span class="line">&#123;% if theme.diy_time.clock.enable %&#125;  </span><br><span class="line">  &#123;% include &#x27;../_custom/clock.swig&#x27; %&#125;</span><br><span class="line">&#123;% endif %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- 网站运行时间 --&gt;</span><br><span class="line">&#123;% if theme.diy_time.runtime.enable %&#125;     </span><br><span class="line">  &#123;% include &#x27;../_custom/runtime.swig&#x27; %&#125;</span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure>

<p><img src="https://img2022.cnblogs.com/blog/2669827/202208/2669827-20220831072938982-1043973208.png" alt="image"></p>
<p>然后打开myblog\blog\themes\xuande\layout_custom新建clock.swig文件</p>
<p>在里面添加如下代码：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- canvas粒子时钟 https://www.cnblogs.com/xiaohuochai/p/6368039.html</span><br><span class="line">  https://www.html5tricks.com/html5-canvas-dance-time.html</span><br><span class="line"> --&gt;</span><br><span class="line">&lt;div id=&quot;&quot;&gt;</span><br><span class="line">  &lt;canvas id=&quot;canvas&quot; style=&quot;width:60%;&quot;&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;script async&gt;</span><br><span class="line">(function()&#123;</span><br><span class="line">  var WINDOW_WIDTH = 820;</span><br><span class="line">  		var WINDOW_HEIGHT = 250;</span><br><span class="line">  		var RADIUS = 7; //球半径</span><br><span class="line">  		var NUMBER_GAP = 10; //数字之间的间隙</span><br><span class="line">  		var u=0.65; //碰撞能量损耗系数</span><br><span class="line">  		var context; //Canvas绘制上下文</span><br><span class="line">  		var balls = []; //存储彩色的小球</span><br><span class="line">  		const colors = [&quot;#33B5E5&quot;,&quot;#0099CC&quot;,&quot;#AA66CC&quot;,&quot;#9933CC&quot;,&quot;#99CC00&quot;,&quot;#669900&quot;,&quot;#FFBB33&quot;,&quot;#FF8800&quot;,&quot;#FF4444&quot;,&quot;#CC0000&quot;]; //彩色小球的颜色</span><br><span class="line">  		var currentNums = []; //屏幕显示的8个字符</span><br><span class="line">  		var digit =</span><br><span class="line">                  [</span><br><span class="line">                      [</span><br><span class="line">                          [0,0,1,1,1,0,0],</span><br><span class="line">                          [0,1,1,0,1,1,0],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [0,1,1,0,1,1,0],</span><br><span class="line">                          [0,0,1,1,1,0,0]</span><br><span class="line">                      ],//0</span><br><span class="line">                      [</span><br><span class="line">                          [0,0,0,1,1,0,0],</span><br><span class="line">                          [0,1,1,1,1,0,0],</span><br><span class="line">                          [0,0,0,1,1,0,0],</span><br><span class="line">                          [0,0,0,1,1,0,0],</span><br><span class="line">                          [0,0,0,1,1,0,0],</span><br><span class="line">                          [0,0,0,1,1,0,0],</span><br><span class="line">                          [0,0,0,1,1,0,0],</span><br><span class="line">                          [0,0,0,1,1,0,0],</span><br><span class="line">                          [0,0,0,1,1,0,0],</span><br><span class="line">                          [1,1,1,1,1,1,1]</span><br><span class="line">                      ],//1</span><br><span class="line">                      [</span><br><span class="line">                          [0,1,1,1,1,1,0],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [0,0,0,0,0,1,1],</span><br><span class="line">                          [0,0,0,0,1,1,0],</span><br><span class="line">                          [0,0,0,1,1,0,0],</span><br><span class="line">                          [0,0,1,1,0,0,0],</span><br><span class="line">                          [0,1,1,0,0,0,0],</span><br><span class="line">                          [1,1,0,0,0,0,0],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [1,1,1,1,1,1,1]</span><br><span class="line">                      ],//2</span><br><span class="line">                      [</span><br><span class="line">                          [1,1,1,1,1,1,1],</span><br><span class="line">                          [0,0,0,0,0,1,1],</span><br><span class="line">                          [0,0,0,0,1,1,0],</span><br><span class="line">                          [0,0,0,1,1,0,0],</span><br><span class="line">                          [0,0,1,1,1,0,0],</span><br><span class="line">                          [0,0,0,0,1,1,0],</span><br><span class="line">                          [0,0,0,0,0,1,1],</span><br><span class="line">                          [0,0,0,0,0,1,1],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [0,1,1,1,1,1,0]</span><br><span class="line">                      ],//3</span><br><span class="line">                      [</span><br><span class="line">                          [0,0,0,0,1,1,0],</span><br><span class="line">                          [0,0,0,1,1,1,0],</span><br><span class="line">                          [0,0,1,1,1,1,0],</span><br><span class="line">                          [0,1,1,0,1,1,0],</span><br><span class="line">                          [1,1,0,0,1,1,0],</span><br><span class="line">                          [1,1,1,1,1,1,1],</span><br><span class="line">                          [0,0,0,0,1,1,0],</span><br><span class="line">                          [0,0,0,0,1,1,0],</span><br><span class="line">                          [0,0,0,0,1,1,0],</span><br><span class="line">                          [0,0,0,1,1,1,1]</span><br><span class="line">                      ],//4</span><br><span class="line">                      [</span><br><span class="line">                          [1,1,1,1,1,1,1],</span><br><span class="line">                          [1,1,0,0,0,0,0],</span><br><span class="line">                          [1,1,0,0,0,0,0],</span><br><span class="line">                          [1,1,1,1,1,1,0],</span><br><span class="line">                          [0,0,0,0,0,1,1],</span><br><span class="line">                          [0,0,0,0,0,1,1],</span><br><span class="line">                          [0,0,0,0,0,1,1],</span><br><span class="line">                          [0,0,0,0,0,1,1],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [0,1,1,1,1,1,0]</span><br><span class="line">                      ],//5</span><br><span class="line">                      [</span><br><span class="line">                          [0,0,0,0,1,1,0],</span><br><span class="line">                          [0,0,1,1,0,0,0],</span><br><span class="line">                          [0,1,1,0,0,0,0],</span><br><span class="line">                          [1,1,0,0,0,0,0],</span><br><span class="line">                          [1,1,0,1,1,1,0],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [0,1,1,1,1,1,0]</span><br><span class="line">                      ],//6</span><br><span class="line">                      [</span><br><span class="line">                          [1,1,1,1,1,1,1],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [0,0,0,0,1,1,0],</span><br><span class="line">                          [0,0,0,0,1,1,0],</span><br><span class="line">                          [0,0,0,1,1,0,0],</span><br><span class="line">                          [0,0,0,1,1,0,0],</span><br><span class="line">                          [0,0,1,1,0,0,0],</span><br><span class="line">                          [0,0,1,1,0,0,0],</span><br><span class="line">                          [0,0,1,1,0,0,0],</span><br><span class="line">                          [0,0,1,1,0,0,0]</span><br><span class="line">                      ],//7</span><br><span class="line">                      [</span><br><span class="line">                          [0,1,1,1,1,1,0],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [0,1,1,1,1,1,0],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [0,1,1,1,1,1,0]</span><br><span class="line">                      ],//8</span><br><span class="line">                      [</span><br><span class="line">                          [0,1,1,1,1,1,0],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [1,1,0,0,0,1,1],</span><br><span class="line">                          [0,1,1,1,0,1,1],</span><br><span class="line">                          [0,0,0,0,0,1,1],</span><br><span class="line">                          [0,0,0,0,0,1,1],</span><br><span class="line">                          [0,0,0,0,1,1,0],</span><br><span class="line">                          [0,0,0,1,1,0,0],</span><br><span class="line">                          [0,1,1,0,0,0,0]</span><br><span class="line">                      ],//9</span><br><span class="line">                      [</span><br><span class="line">                          [0,0,0,0],</span><br><span class="line">                          [0,0,0,0],</span><br><span class="line">                          [0,1,1,0],</span><br><span class="line">                          [0,1,1,0],</span><br><span class="line">                          [0,0,0,0],</span><br><span class="line">                          [0,0,0,0],</span><br><span class="line">                          [0,1,1,0],</span><br><span class="line">                          [0,1,1,0],</span><br><span class="line">                          [0,0,0,0],</span><br><span class="line">                          [0,0,0,0]</span><br><span class="line">                      ]//:</span><br><span class="line">                  ];</span><br><span class="line"></span><br><span class="line">  		function drawDatetime(cxt)&#123;</span><br><span class="line">  			var nums = [];</span><br><span class="line"></span><br><span class="line">  			context.fillStyle=&quot;#005eac&quot;</span><br><span class="line">  			var date = new Date();</span><br><span class="line">  			var offsetX = 70, offsetY = 30;</span><br><span class="line">  			var hours = date.getHours();</span><br><span class="line">  			var num1 = Math.floor(hours/10);</span><br><span class="line">  			var num2 = hours%10;</span><br><span class="line">  			nums.push(&#123;num: num1&#125;);</span><br><span class="line">  			nums.push(&#123;num: num2&#125;);</span><br><span class="line">  			nums.push(&#123;num: 10&#125;); //冒号</span><br><span class="line">  			var minutes = date.getMinutes();</span><br><span class="line">  			var num1 = Math.floor(minutes/10);</span><br><span class="line">  			var num2 = minutes%10;</span><br><span class="line">  			nums.push(&#123;num: num1&#125;);</span><br><span class="line">  			nums.push(&#123;num: num2&#125;);</span><br><span class="line">  			nums.push(&#123;num: 10&#125;); //冒号</span><br><span class="line">  			var seconds = date.getSeconds();</span><br><span class="line">  			var num1 = Math.floor(seconds/10);</span><br><span class="line">  			var num2 = seconds%10;</span><br><span class="line">  			nums.push(&#123;num: num1&#125;);</span><br><span class="line">  			nums.push(&#123;num: num2&#125;);</span><br><span class="line"></span><br><span class="line">  			for(var x = 0;x&lt;nums.length;x++)&#123;</span><br><span class="line">  				nums[x].offsetX = offsetX;</span><br><span class="line">  				offsetX = drawSingleNumber(offsetX,offsetY, nums[x].num,cxt);</span><br><span class="line">  				//两个数字连一块，应该间隔一些距离</span><br><span class="line">  				if(x&lt;nums.length-1)&#123;</span><br><span class="line">  					if((nums[x].num!=10) &amp;&amp;(nums[x+1].num!=10))&#123;</span><br><span class="line">  						offsetX+=NUMBER_GAP;</span><br><span class="line">  					&#125;</span><br><span class="line">  				&#125;</span><br><span class="line">  			&#125;</span><br><span class="line"></span><br><span class="line">  			//说明这是初始化</span><br><span class="line">  			if(currentNums.length ==0)&#123;</span><br><span class="line">  				currentNums = nums;</span><br><span class="line">  			&#125;else&#123;</span><br><span class="line">  				//进行比较</span><br><span class="line">  				for(var index = 0;index&lt;currentNums.length;index++)&#123;</span><br><span class="line">  					if(currentNums[index].num!=nums[index].num)&#123;</span><br><span class="line">  						//不一样时，添加彩色小球</span><br><span class="line">  						addBalls(nums[index]);</span><br><span class="line">  						currentNums[index].num=nums[index].num;</span><br><span class="line">  					&#125;</span><br><span class="line">  				&#125;</span><br><span class="line">  			&#125;</span><br><span class="line">  			renderBalls(cxt);</span><br><span class="line">  			updateBalls();</span><br><span class="line"></span><br><span class="line">  			return date;</span><br><span class="line">  		&#125;</span><br><span class="line"></span><br><span class="line">  		function addBalls (item) &#123;</span><br><span class="line">  			var num = item.num;</span><br><span class="line">  			var numMatrix = digit[num];</span><br><span class="line">  			for(var y = 0;y&lt;numMatrix.length;y++)&#123;</span><br><span class="line">  				for(var x = 0;x&lt;numMatrix[y].length;x++)&#123;</span><br><span class="line">  					if(numMatrix[y][x]==1)&#123;</span><br><span class="line">  						var ball=&#123;</span><br><span class="line">  							offsetX:item.offsetX+RADIUS+RADIUS*2*x,</span><br><span class="line">  							offsetY:30+RADIUS+RADIUS*2*y,</span><br><span class="line">  							color:colors[Math.floor(Math.random()*colors.length)],</span><br><span class="line">  							g:1.5+Math.random(),</span><br><span class="line">  							vx:Math.pow(-1, Math.ceil(Math.random()*10))*4+Math.random(),</span><br><span class="line">  							vy:-5</span><br><span class="line">  						&#125;</span><br><span class="line">  						balls.push(ball);</span><br><span class="line">  					&#125;</span><br><span class="line">  				&#125;</span><br><span class="line">  			&#125;</span><br><span class="line">  		&#125;</span><br><span class="line"></span><br><span class="line">  		function renderBalls(cxt)&#123;</span><br><span class="line">  			for(var index = 0;index&lt;balls.length;index++)&#123;</span><br><span class="line">  				cxt.beginPath();</span><br><span class="line">  				cxt.fillStyle=balls[index].color;</span><br><span class="line">  				cxt.arc(balls[index].offsetX, balls[index].offsetY, RADIUS, 0, 2*Math.PI);</span><br><span class="line">  				cxt.fill();</span><br><span class="line">  			&#125;</span><br><span class="line">  		&#125;</span><br><span class="line"></span><br><span class="line">  		function updateBalls () &#123;</span><br><span class="line">  			var i =0;</span><br><span class="line">  			for(var index = 0;index&lt;balls.length;index++)&#123;</span><br><span class="line">  				var ball = balls[index];</span><br><span class="line">  				ball.offsetX += ball.vx;</span><br><span class="line">  				ball.offsetY += ball.vy;</span><br><span class="line">  				ball.vy+=ball.g;</span><br><span class="line">  				if(ball.offsetY &gt; (WINDOW_HEIGHT-RADIUS))&#123;</span><br><span class="line">  					ball.offsetY= WINDOW_HEIGHT-RADIUS;</span><br><span class="line">  					ball.vy=-ball.vy*u;</span><br><span class="line">  				&#125;</span><br><span class="line">  				if(ball.offsetX&gt;RADIUS&amp;&amp;ball.offsetX&lt;(WINDOW_WIDTH-RADIUS))&#123;</span><br><span class="line"></span><br><span class="line">  					balls[i]=balls[index];</span><br><span class="line">  					i++;</span><br><span class="line">  				&#125;</span><br><span class="line">  			&#125;</span><br><span class="line">  			//去除出边界的球</span><br><span class="line">  			for(;i&lt;balls.length;i++)&#123;</span><br><span class="line">  				balls.pop();</span><br><span class="line">  			&#125;</span><br><span class="line">  		&#125;</span><br><span class="line">  		function drawSingleNumber(offsetX, offsetY, num, cxt)&#123;</span><br><span class="line">  			var numMatrix = digit[num];</span><br><span class="line">  			for(var y = 0;y&lt;numMatrix.length;y++)&#123;</span><br><span class="line">  				for(var x = 0;x&lt;numMatrix[y].length;x++)&#123;</span><br><span class="line">  					if(numMatrix[y][x]==1)&#123;</span><br><span class="line">  						cxt.beginPath();</span><br><span class="line">  						cxt.arc(offsetX+RADIUS+RADIUS*2*x,offsetY+RADIUS+RADIUS*2*y,RADIUS,0,2*Math.PI);</span><br><span class="line">  						cxt.fill();</span><br><span class="line">  					&#125;</span><br><span class="line">  				&#125;</span><br><span class="line">  			&#125;</span><br><span class="line">  			cxt.beginPath();</span><br><span class="line">  			offsetX += numMatrix[0].length*RADIUS*2;</span><br><span class="line">  			return offsetX;</span><br><span class="line">  		&#125;</span><br><span class="line"></span><br><span class="line">  		var canvas = document.getElementById(&quot;canvas&quot;);</span><br><span class="line">  		canvas.width=WINDOW_WIDTH;</span><br><span class="line">  		canvas.height=WINDOW_HEIGHT;</span><br><span class="line">  		context = canvas.getContext(&quot;2d&quot;);</span><br><span class="line"></span><br><span class="line">  		//记录当前绘制的时刻</span><br><span class="line">  		var currentDate = new Date();</span><br><span class="line"></span><br><span class="line">  		setInterval(function()&#123;</span><br><span class="line">  			//清空整个Canvas，重新绘制内容</span><br><span class="line">  			context.clearRect(0, 0, context.canvas.width, context.canvas.height);</span><br><span class="line">  			drawDatetime(context);</span><br><span class="line">  		&#125;, 50)</span><br><span class="line">&#125;)();</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>最后打开<code>myblog/themes/next/_config.yml</code>在最下面添加如下代码</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"># 侧栏自定义时间</span><br><span class="line">diy_time:</span><br><span class="line">  runtime:</span><br><span class="line">    enable: true #运行时间</span><br><span class="line">    birthday: &quot;07/25/2022 12:00:00&quot;</span><br><span class="line">  clock:</span><br><span class="line">    enable: true # 粒子  </span><br></pre></td></tr></table></figure>



<h2 id="live2d高级看板娘"><a href="#live2d高级看板娘" class="headerlink" title="live2d高级看板娘"></a>live2d高级看板娘</h2><h3 id="简单Demo"><a href="#简单Demo" class="headerlink" title="简单Demo"></a>简单Demo</h3><p><strong>导入 Font Awesome 图标支持</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fastly.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css&quot;&gt;</span><br></pre></td></tr></table></figure>

<p>把下面代码放入<code>你的博客根目录下\themes\xuande\layout\_layout.njk</code>里面（也可能是_layout.swig，取决于你的next版本）</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=&quot;https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js&quot;&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>放置位置如下：</strong></p>
<p><img src="https://img2022.cnblogs.com/blog/2669827/202208/2669827-20220831073034136-1816661421.png" alt="image"></p>
<p>最后在打开<code>myblog/themes/next/_config.yml</code>在最下面添加如下代码</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"># 看板娘</span><br><span class="line">live2d:</span><br><span class="line">  enable: true</span><br></pre></td></tr></table></figure>

<p>注：也可以把这两行代码删掉，可以防止与自带看板娘冲突</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% if theme.live2d.enable %&#125;  </span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure>

<p>这样一个萌萌哒的看板娘就出来啦</p>
<p><img src="https://img2022.cnblogs.com/blog/2669827/202208/2669827-20220831073059252-1014437259.png" alt="image"></p>
<p>注：如果跟自带的看板娘冲突，请先卸载自带的看板娘</p>
<h3 id="自定义看板娘"><a href="#自定义看板娘" class="headerlink" title="自定义看板娘"></a>自定义看板娘</h3><p><strong>首先，先把文件克隆到你的博客的source目录下（根目录下和主题目录下的sources都可以）</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone https://github.com/stevenjoezhang/live2d-widget.git</span><br></pre></td></tr></table></figure>

<p><strong>其次，更改一下引用路径</strong></p>
<p><code>_layout.njk：</code></p>
<p><img src="https://img2022.cnblogs.com/blog/2669827/202208/2669827-20220831073129794-650988816.png" alt="image"></p>
<p><code>source\live2d\autoload.js</code>：</p>
<p><img src="https://img2022.cnblogs.com/blog/2669827/202208/2669827-20220831073142192-272702901.png" alt="image"></p>
<p>这样，就可以在<code>waifu-tips.js</code>和<code>waifu-tips.json</code>里面更改活动检测和对话内容了</p>
<p>（注：gitee有文字检测功能，如果提示违规就删掉waifu-tips.json里的”click”对话的部分文字，这gitee的检测机制我是真的服。。。。）</p>
<h3 id="补充"><a href="#补充" class="headerlink" title="补充"></a>补充</h3><p>以上是在本地更改，也可以在GitHub上Fork一份，然后用cdn加载也是可以的，条条大路通罗马嘛</p>
<p>如果cdn访问不了的话，不妨试试api</p>
<p><code>source\live2d\autoload.js</code>：</p>
<p><img src="https://img2022.cnblogs.com/blog/2669827/202208/2669827-20220831073159530-1101998031.png" alt="image"></p>
<p><strong>添加看板娘模型：</strong></p>
<p>这里我没试过，但思路是有的，留个期待，以后完善</p>
<h2 id="轮播图设置"><a href="#轮播图设置" class="headerlink" title="轮播图设置"></a>轮播图设置</h2><h3 id="第一步：添加配置"><a href="#第一步：添加配置" class="headerlink" title="第一步：添加配置"></a>第一步：添加配置</h3><p>找到博客目录下的<code>themes\next\layout</code>下的<code>index</code>文件</p>
<p>添加下面这一行代码</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% include &#x27;_macro/carousel.swig&#x27; %&#125;</span><br></pre></td></tr></table></figure>

<p><img src="https://img2022.cnblogs.com/blog/2669827/202208/2669827-20220831073257075-1052986789.png" alt="image"></p>
<h3 id="第二步：添加文件"><a href="#第二步：添加文件" class="headerlink" title="第二步：添加文件"></a>第二步：添加文件</h3><p>在<code>themes\next\layout\macro</code>文件下创建<code>carousel.swig</code>文件。</p>
<p>写入以下内容：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br></pre></td><td class="code"><pre><span class="line">&#123;% if theme.carousel.enable %&#125;</span><br><span class="line">&lt;script src=&quot;https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;script src=&quot;https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style type=&quot;text/css&quot;&gt;</span><br><span class="line"></span><br><span class="line">.glyphicon-chevron-left:before&#123;</span><br><span class="line">	content: &quot;《&quot;</span><br><span class="line">&#125;</span><br><span class="line">.glyphicon-chevron-right:before&#123;</span><br><span class="line">	content: &quot;》&quot;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">@media (max-width: 767px)&#123;</span><br><span class="line">	.rights&#123;</span><br><span class="line">		display: none;</span><br><span class="line">	&#125;</span><br><span class="line">	.carousel&#123;</span><br><span class="line">		width: 100% !important;</span><br><span class="line">		height: 100% !important;</span><br><span class="line">	&#125;</span><br><span class="line">	.slide&#123;</span><br><span class="line">		width: 100% !important;</span><br><span class="line">		height: 100% !important;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.carousel&#123;</span><br><span class="line">	width: 100%;</span><br><span class="line">	height: 100%;</span><br><span class="line">	position: relative;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.carousel-inner &#123;</span><br><span class="line">  position: relative;</span><br><span class="line">  overflow: hidden;</span><br><span class="line">  width: 100%;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-inner &gt; .item &#123;</span><br><span class="line">  display: none;</span><br><span class="line">  position: relative;</span><br><span class="line">  -webkit-transition: 0.6s ease-in-out left;</span><br><span class="line">  -o-transition: 0.6s ease-in-out left;</span><br><span class="line">  transition: 0.6s ease-in-out left;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-inner &gt; .item &gt; img,</span><br><span class="line">.carousel-inner &gt; .item &gt; a &gt; img &#123;</span><br><span class="line">  line-height: 1;</span><br><span class="line">&#125;</span><br><span class="line">@media all and (transform-3d), (-webkit-transform-3d) &#123;</span><br><span class="line">  .carousel-inner &gt; .item &#123;</span><br><span class="line">    -webkit-transition: -webkit-transform 0.6s ease-in-out;</span><br><span class="line">    -moz-transition: -moz-transform 0.6s ease-in-out;</span><br><span class="line">    -o-transition: -o-transform 0.6s ease-in-out;</span><br><span class="line">    transition: transform 0.6s ease-in-out;</span><br><span class="line">    -webkit-backface-visibility: hidden;</span><br><span class="line">    -moz-backface-visibility: hidden;</span><br><span class="line">    backface-visibility: hidden;</span><br><span class="line">    -webkit-perspective: 1000px;</span><br><span class="line">    -moz-perspective: 1000px;</span><br><span class="line">    perspective: 1000px;</span><br><span class="line">  &#125;</span><br><span class="line">  .carousel-inner &gt; .item.next,</span><br><span class="line">  .carousel-inner &gt; .item.active.right &#123;</span><br><span class="line">    -webkit-transform: translate3d(100%, 0, 0);</span><br><span class="line">    transform: translate3d(100%, 0, 0);</span><br><span class="line">    left: 0;</span><br><span class="line">  &#125;</span><br><span class="line">  .carousel-inner &gt; .item.prev,</span><br><span class="line">  .carousel-inner &gt; .item.active.left &#123;</span><br><span class="line">    -webkit-transform: translate3d(-100%, 0, 0);</span><br><span class="line">    transform: translate3d(-100%, 0, 0);</span><br><span class="line">    left: 0;</span><br><span class="line">  &#125;</span><br><span class="line">  .carousel-inner &gt; .item.next.left,</span><br><span class="line">  .carousel-inner &gt; .item.prev.right,</span><br><span class="line">  .carousel-inner &gt; .item.active &#123;</span><br><span class="line">    -webkit-transform: translate3d(0, 0, 0);</span><br><span class="line">    transform: translate3d(0, 0, 0);</span><br><span class="line">    left: 0;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-inner &gt; .active,</span><br><span class="line">.carousel-inner &gt; .next,</span><br><span class="line">.carousel-inner &gt; .prev &#123;</span><br><span class="line">  display: block;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-inner &gt; .active &#123;</span><br><span class="line">  left: 0;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-inner &gt; .next,</span><br><span class="line">.carousel-inner &gt; .prev &#123;</span><br><span class="line">  position: absolute;</span><br><span class="line">  top: 0;</span><br><span class="line">  width: 100%;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-inner &gt; .next &#123;</span><br><span class="line">  left: 100%;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-inner &gt; .prev &#123;</span><br><span class="line">  left: -100%;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-inner &gt; .next.left,</span><br><span class="line">.carousel-inner &gt; .prev.right &#123;</span><br><span class="line">  left: 0;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-inner &gt; .active.left &#123;</span><br><span class="line">  left: -100%;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-inner &gt; .active.right &#123;</span><br><span class="line">  left: 100%;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-control &#123;</span><br><span class="line">  position: absolute;</span><br><span class="line">  top: 0;</span><br><span class="line">  left: 0;</span><br><span class="line">  bottom: 0;</span><br><span class="line">  width: 15%;</span><br><span class="line">  opacity: 0.5;</span><br><span class="line">  filter: alpha(opacity=50);</span><br><span class="line">  font-size: 20px;</span><br><span class="line">  color: #fff;</span><br><span class="line">  text-align: center;</span><br><span class="line">  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);</span><br><span class="line">  background-color: rgba(0, 0, 0, 0);</span><br><span class="line">&#125;</span><br><span class="line">.carousel-control.left &#123;</span><br><span class="line">  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);</span><br><span class="line">  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);</span><br><span class="line">  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);</span><br><span class="line">  background-repeat: repeat-x;</span><br><span class="line">  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#x27;#80000000&#x27;, endColorstr=&#x27;#00000000&#x27;, GradientType=1);</span><br><span class="line">&#125;</span><br><span class="line">.carousel-control.right &#123;</span><br><span class="line">  left: auto;</span><br><span class="line">  right: 0;</span><br><span class="line">  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);</span><br><span class="line">  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);</span><br><span class="line">  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);</span><br><span class="line">  background-repeat: repeat-x;</span><br><span class="line">  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#x27;#00000000&#x27;, endColorstr=&#x27;#80000000&#x27;, GradientType=1);</span><br><span class="line">&#125;</span><br><span class="line">.carousel-control:hover,</span><br><span class="line">.carousel-control:focus &#123;</span><br><span class="line">  outline: 0;</span><br><span class="line">  color: #fff;</span><br><span class="line">  text-decoration: none;</span><br><span class="line">  opacity: 0.9;</span><br><span class="line">  filter: alpha(opacity=90);</span><br><span class="line">&#125;</span><br><span class="line">.carousel-control .icon-prev,</span><br><span class="line">.carousel-control .icon-next,</span><br><span class="line">.carousel-control .glyphicon-chevron-left,</span><br><span class="line">.carousel-control .glyphicon-chevron-right &#123;</span><br><span class="line">  position: absolute;</span><br><span class="line">  top: 50%;</span><br><span class="line">  margin-top: -10px;</span><br><span class="line">  z-index: 5;</span><br><span class="line">  display: inline-block;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-control .icon-prev,</span><br><span class="line">.carousel-control .glyphicon-chevron-left &#123;</span><br><span class="line">  left: 50%;</span><br><span class="line">  margin-left: -10px;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-control .icon-next,</span><br><span class="line">.carousel-control .glyphicon-chevron-right &#123;</span><br><span class="line">  right: 50%;</span><br><span class="line">  margin-right: -10px;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-control .icon-prev,</span><br><span class="line">.carousel-control .icon-next &#123;</span><br><span class="line">  width: 20px;</span><br><span class="line">  height: 20px;</span><br><span class="line">  line-height: 1;</span><br><span class="line">  font-family: serif;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-control .icon-prev:before &#123;</span><br><span class="line">  content: &#x27;\2039&#x27;;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-control .icon-next:before &#123;</span><br><span class="line">  content: &#x27;\203a&#x27;;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-indicators &#123;</span><br><span class="line">  position: absolute;</span><br><span class="line">  bottom: 10px;</span><br><span class="line">  left: 50%;</span><br><span class="line">  z-index: 15;</span><br><span class="line">  width: 60%;</span><br><span class="line">  margin-left: -30%;</span><br><span class="line">  padding-left: 0;</span><br><span class="line">  list-style: none;</span><br><span class="line">  text-align: center;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-indicators li &#123;</span><br><span class="line">  display: inline-block;</span><br><span class="line">  width: 10px;</span><br><span class="line">  height: 10px;</span><br><span class="line">  margin: 1px;</span><br><span class="line">  text-indent: -999px;</span><br><span class="line">  border: 1px solid #fff;</span><br><span class="line">  border-radius: 10px;</span><br><span class="line">  cursor: pointer;</span><br><span class="line">  background-color: #000 \9;</span><br><span class="line">  background-color: rgba(0, 0, 0, 0);</span><br><span class="line">&#125;</span><br><span class="line">.carousel-indicators .active &#123;</span><br><span class="line">  margin: 0;</span><br><span class="line">  width: 12px;</span><br><span class="line">  height: 12px;</span><br><span class="line">  background-color: #fff;</span><br><span class="line">&#125;</span><br><span class="line">.carousel-caption &#123;</span><br><span class="line">  position: absolute;</span><br><span class="line">  left: 15%;</span><br><span class="line">  right: 15%;</span><br><span class="line">  bottom: 20px;</span><br><span class="line">  z-index: 10;</span><br><span class="line">  padding-top: 20px;</span><br><span class="line">  padding-bottom: 20px;</span><br><span class="line">  color: #fff;</span><br><span class="line">  text-align: center;</span><br><span class="line">  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);</span><br><span class="line">&#125;</span><br><span class="line">.carousel-caption .btn &#123;</span><br><span class="line">  text-shadow: none;</span><br><span class="line">&#125;</span><br><span class="line">@media screen and (min-width: 768px) &#123;</span><br><span class="line">  .carousel-control .glyphicon-chevron-left,</span><br><span class="line">  .carousel-control .glyphicon-chevron-right,</span><br><span class="line">  .carousel-control .icon-prev,</span><br><span class="line">  .carousel-control .icon-next &#123;</span><br><span class="line">    width: 30px;</span><br><span class="line">    height: 30px;</span><br><span class="line">    margin-top: -10px;</span><br><span class="line">    font-size: 30px;</span><br><span class="line">  &#125;</span><br><span class="line">  .carousel-control .glyphicon-chevron-left,</span><br><span class="line">  .carousel-control .icon-prev &#123;</span><br><span class="line">    margin-left: -10px;</span><br><span class="line">  &#125;</span><br><span class="line">  .carousel-control .glyphicon-chevron-right,</span><br><span class="line">  .carousel-control .icon-next &#123;</span><br><span class="line">    margin-right: -10px;</span><br><span class="line">  &#125;</span><br><span class="line">  .carousel-caption &#123;</span><br><span class="line">    left: 20%;</span><br><span class="line">    right: 20%;</span><br><span class="line">    padding-bottom: 30px;</span><br><span class="line">  &#125;</span><br><span class="line">  .carousel-indicators &#123;</span><br><span class="line">    bottom: 20px;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line">&lt;div width=&quot;100%&quot; height=&quot;320px&quot; style=&quot;border: 0px; overflow: hidden; border-radius: 10px;&quot; scrolling=&quot;no&quot;&gt;</span><br><span class="line">			</span><br><span class="line">	&lt;div id=&quot;myCarousel&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot; data-interval=&quot;3500&quot; &gt;</span><br><span class="line">		&lt;!-- 轮播（Carousel）指标 --&gt;</span><br><span class="line">		&lt;ol class=&quot;carousel-indicators&quot;&gt;</span><br><span class="line">		&#123;% set index = 0 %&#125;</span><br><span class="line">		&#123;% for item in theme.carousel.item %&#125;</span><br><span class="line"></span><br><span class="line">			&lt;li data-target=&quot;#myCarousel&quot; data-slide-to=&quot;&#123;&#123;index&#125;&#125;&quot;&gt;&lt;/li&gt;</span><br><span class="line">			&#123;% set index = index+1 %&#125;</span><br><span class="line"></span><br><span class="line">		&#123;% endfor %&#125;</span><br><span class="line">		&lt;/ol&gt;</span><br><span class="line">		&lt;!-- 轮播（Carousel）项目 --&gt;</span><br><span class="line">		&lt;div class=&quot;carousel-inner&quot; style=&quot;height: 280px; border-radius: 10px; width: 100%;&quot;&gt;</span><br><span class="line"></span><br><span class="line">		&#123;% set act = 0 %&#125;</span><br><span class="line">		 &#123;% for item in theme.carousel.item %&#125;</span><br><span class="line">		</span><br><span class="line">	    	&#123;% if act===0 %&#125;</span><br><span class="line">				&lt;a class=&quot;item active&quot; href=&quot;&#123;&#123; url_for(item.link) &#125;&#125;&quot; target=&quot;_blank&quot; style=&quot;height: 100%;&quot;&gt;</span><br><span class="line">					&lt;img src=&quot;&#123;&#123;item.img&#125;&#125;&quot;   style=&quot;width: 100%; height: 100%&quot; &gt;</span><br><span class="line">				&lt;/a&gt;</span><br><span class="line">				&#123;% set act = 1 %&#125;</span><br><span class="line">				&#123;% elseif act===1 %&#125;</span><br><span class="line">					&lt;a class=&quot;item&quot; href=&quot;&#123;&#123; url_for(item.link) &#125;&#125;&quot; target=&quot;_blank&quot; style=&quot;height: 100%;&quot;&gt;</span><br><span class="line">						&lt;img src=&quot;&#123;&#123;item.img&#125;&#125;&quot;  style=&quot;width: 100%; height: 100%;&quot; &gt;</span><br><span class="line">					&lt;/a&gt;</span><br><span class="line">			&#123;% endif %&#125;</span><br><span class="line"></span><br><span class="line">		&#123;% endfor %&#125;</span><br><span class="line"></span><br><span class="line">	 </span><br><span class="line">		&lt;/div&gt;</span><br><span class="line">		&lt;!-- 轮播（Carousel）导航 --&gt;</span><br><span class="line">		&lt;a class=&quot;left carousel-control&quot; href=&quot;#myCarousel&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;</span><br><span class="line">		    &lt;span class=&quot;glyphicon glyphicon-chevron-left&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;</span><br><span class="line">		    </span><br><span class="line">		&lt;/a&gt;</span><br><span class="line">		&lt;a class=&quot;right carousel-control&quot; href=&quot;#myCarousel&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;</span><br><span class="line">		    &lt;span class=&quot;glyphicon glyphicon-chevron-right&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;</span><br><span class="line">		   </span><br><span class="line">		&lt;/a&gt;</span><br><span class="line">	&lt;/div&gt; </span><br><span class="line">&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure>

<h3 id="第三步：配置文件中配置图片及链接"><a href="#第三步：配置文件中配置图片及链接" class="headerlink" title="第三步：配置文件中配置图片及链接"></a>第三步：配置文件中配置图片及链接</h3><p>在next主题目录下的<code>_config.xml</code>主题配置文件中末尾添加如下配置：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"># 主页轮播图 使用 620x310 的图片</span><br><span class="line">#Home carousel map, from means link, img means picture</span><br><span class="line">carousel: </span><br><span class="line">   enable: true</span><br><span class="line">   item: [</span><br><span class="line">      &#123;</span><br><span class="line">        &#x27;link&#x27;:&#x27;文章链接1&#x27;,</span><br><span class="line">        &#x27;img&#x27;:&#x27;图片链接1&#x27;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        &#x27;link&#x27;:&#x27;文章链接2&#x27;,</span><br><span class="line">        &#x27;img&#x27;:&#x27;图片链接2&#x27;</span><br><span class="line">      &#125;,</span><br><span class="line">   ]</span><br></pre></td></tr></table></figure>

<p>ps:注意：开启这种轮播图形式的时候，在主题配置文件中不要开启<code>fancybox</code>，这个设置需要设置为<code>false</code>，不然在点击图片进行跳转时会出现<code>The requested content cannot be loaded.Please try again later.</code>错误</p>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="reward-container">
  <div>坚持原创技术分享，感谢您的支持和鼓励</div>
  <button>
    赞赏
  </button>
  <div class="post-reward">
      <div>
        <img src="/images/wechatpay.png" alt="玄德 微信">
        <span>微信</span>
      </div>
      <div>
        <img src="/images/alipay.png" alt="玄德 支付宝">
        <span>支付宝</span>
      </div>

  </div>
</div>

          <div class="followme">
  <span>欢迎关注我的其它发布渠道</span>

  <div class="social-list">

      <div class="social-item">
        <a target="_blank" class="social-link" href="/images/wechat_channel.jpg">
          <span class="icon">
            <i class="fab fa-weixin"></i>
          </span>

          <span class="label">WeChat</span>
        </a>
      </div>
  </div>
</div>

          <div class="post-tags">
              <a href="/tags/Hexo/" rel="tag"># Hexo</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/posts/1.html" rel="prev" title="Hexo博客搭建">
                  <i class="fa fa-chevron-left"></i> Hexo博客搭建
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/posts/3.html" rel="next" title="DC-9靶场笔记">
                  DC-9靶场笔记 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 2022 – 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">玄德</span>
</div>
<div class="busuanzi-count">
    <span class="post-meta-item" id="busuanzi_container_site_uv">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="我的第 undefined 位朋友，">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-item" id="busuanzi_container_site_pv">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="历经 undefined 次回眸才与你相遇">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>

    </div>
  </footer>

  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script>

  
<script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.4.0/search.js" integrity="sha256-vXZMYLEqsROAXkEw93GGIvaB2ab+QW6w3+1ahD9nXXA=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>




  <script src="/js/third-party/pace.js"></script>

  
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>






  <script async src="/js/cursor/love.min.js"></script>


</body>
</html>
